<template>
  <div style="background: white; margin-top: 15px">
    <el-tabs type="border-card" style="height: 400px">
      <el-tab-pane>
        <span slot="label" style="right:150px"><i class="el-icon-date"></i>券号</span>
        <div class="container">
          <div class="header">
            <div class="text"></div>
            <div class="footer">
              <Button
                type="info"
                size="small"
                ghost
                @click="cc"
                style="right: 100px"
                >批量发券</Button>
            </div>
          </div>
          <vol-table
            ref="tableList"
            :columns="columns"
            :pagination-hide="false"
            :height="300"
            :defaultLoadPage="false"
            url="/api/mall_volume_item/getPageData"
            :columnIndex="false"
            :index="true"
            :click-edit="true"
            @loadBefore="loadTableBefore2"
          ></vol-table>
        </div>
        <Button type="success" @click="getForm"></Button>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-tab-pane :lazy="true" label="引用子页面"></el-tab-pane> -->
    <choosereservation
      ref="choosereservation"
      style="margin-bottom: 20px"
    ></choosereservation>
  </div>
</template>

<script>
//引用子页面
import choosereservation from "../volumn/ChooseReservation.vue";

import VolTable from "@/components/basic/VolTable.vue";
var vueParam = {
  // account:{
  //  volumngridHeader,

  // },
  components: {
    choosereservation,
    VolTable,
  },
  methods: {
    cc() {
      let row = this.$refs.tableList.getSelected();
      // this.$refs.tableList.$refs.tableList.toggleRowSelection(rows);
      //   var row = [];
      //  for(var i=0;i<rows.length;i++)
      //  {
      //     row.push{rows[i].id,rows[i].volumeID,rows[i].status};
      //  }
      if (row.length == 0) {
        return this.$message.error("请先选中行1");
      }
      /* this.$message.info("当前选中的行数据:" + JSON.stringify(row)); */
      // this.$refs.choosereservation.open("mall_volumn",row);
      var Vidsy = [];
      var viIds = [],
        vIds = row[0].volumeID;
      for (let index = 0; index < row.length; index++) {
        viIds.push(row[index].id);     
        Vidsy.push(row[index].status);
        if(row[index].status==1){
           return this.$message.error("券已领用");
        }
      }
      if(viIds.length>1){

      
      this.$store.getters.data().mall_volumnItemID = viIds; //row[i].id;
      this.$store.getters.data().mall_volumnID = vIds; //row[i].volumeID;
      // }
      // this.$refs.getters.row();
      this.$refs.choosereservation.open("mall_volumn");
      }else{
        return this.$message.error("批量发券最少选两张券");
      }
      /* } */
    },

    getForm() {
      if (!this.$refs.myform.validate()) {
      }
    },
    loadTableBefore2() {
      let param = [];
      param.push("volumnstatus");
      this.http
        .post("api/Dictionary/GetVueDictionary", param, true)
        .then((reslut) => {
          this.columns.forEach((x) => {
            if (x.field == "status") {
              //强烈建议此处将eidt设置为null不开启编辑
              x.bind.data = reslut.find(
                (item1) => item1.dicNo == "volumnstatus"
              ).data;
            }
          });
        });
    },
    //跳转
    getRender() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "border-bottom": "1px solid" },
              on: {
                click: (e) => {
                  this.$store.getters.data().mall_volumnItemID = row.id;
                  this.$store.getters.data().mall_volumnID = row.volumeID;
                  //console.log(this.$store.getters.data().mall_volumnID)
                  //判断券的状态：若为一代表已领用 领用的券不可再次领用
                  if (row.status == 1) {
                    return this.$message.error("券已领用");
                  } else {
                    this.$refs.choosereservation.open("mall_volumn");
                  } //this.$refs.gridHeader.open(row); //this.$message.error("操作领券")
                },
              },
            },
            "发券"
          ),
        ]);
      };
    },

    getFormOption(field) {
      let option;
      this.editFormOptions.forEach((x) => {
        x.forEach((item) => {
          if (item.field == field) {
            option = item;
          }
        });
      });
      return option;
    },
    open(row) {
      let that = this;

      that.modifyOptionsEmail.model = true;
      let where = {
        wheres: [{ name: "order_item_id", value: row.id, displayType: "text" }],
      };
      this.$store.getters
        .data()
        .order.$refs.gridFooter.$refs.table2List.load(where); //table2List.load(where)
    },
  },

  data() {
    return {
      model: false,
      modifyOptionsEmail: {
        model: false,
      },
      tableData: [],
      columns: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 120,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "volumeName",
          title: "券描述",
          type: "string",
          width: 120,
          align: "left",
          fixed: "left",
        },
        {
          field: "volumeNumber",
          title: "券号",
          type: "decimal",
          width: 120,
          align: "left",
        },
        {
          field: "volumePrice",
          title: "券价格",
          type: "int",
          width: 120,
          align: "left",
        },
        {
          field: "status",
          title: "状态",
          type: "string",
          bind: { key: "volumnstatus", data: [] },
          width: 120,
          align: "left",
        },
        {
          field: "qrCodeImg",
          title: "二维码",
          type: "img",
          width: 120,
          align: "left",
        },
        {
          field: "remark",
          title: "备注",
          type: "decimal",
          width: 120,
          align: "left",
        },
        {
          field: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true,
        },
        {
          field: "modifier",
          title: "修改人名称",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 160,
          align: "left",
          sortable: true,
        },
        {
          field: "creator",
          title: "创建人名称",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "Render",
          title: "操作",
          fixed: "right",
          width: 80,
          render: this.getRender(),
        },
      ],
    };
  },
};
export default vueParam;
</script>
